<template>
    <div>
        <el-form ref="form3" :model="form" :rules="rules" label-width="100px" label-position="top">
            <el-row :gutter="10">
                <el-col :span="8">
                    <el-form-item label="还车时间:" prop="returnTime">
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.returnTime"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择还车时间"
                            @change="calculateDeductionFees">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="还车里程数(km):" prop="returnMileage">
                        <el-input v-model="form.returnMileage"  placeholder="请输入还车里程数" type="number" @blur="blurReturnMileage"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="还车油量(%):" prop="returnFuel">
                        <el-input v-model.number="form.returnFuel" placeholder="请输入还车油量" type="number" @blur="blurReturnFuel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="已履行租期" prop="fulfilledLeaseTerm">
                    <el-input disabled v-model="form.fulfilledLeaseTerm" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="行驶里程数(km):" prop="drivingMileage" type="number">
                        <el-input disabled v-model.number="form.drivingMileage" placeholder="输入完还车里程后自动计算"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="油量差值(%):" prop="oilVolumeDiff" type="number">
                        <el-input disabled v-model.number="form.oilVolumeDiff" placeholder="输入完还车油量后自动计算"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="还车原因:" prop="reasonForReturningTheCar">
                        <el-input type="textarea" placeholder="请输入还车原因" v-model="form.reasonForReturningTheCar" maxlength="500" :rows="4" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">理赔信息</p>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理赔承担方式:" prop="claimsMethod">
                        <el-radio-group v-model="form.claimsMethod">
                            <el-radio v-for="(dict, index) in claimsLiabilityTypes" :key="dict.value"
                                      :label="dict.value"><span>{{ dict.label }}</span></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item :label="`${form.claimsMethod==1?'客户理赔款':'保险理赔款'}`" prop="compensationClaims">
                        <el-input v-model.number="form.compensationClaims" placeholder="请输入理赔款"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="其他费用:" prop="otherFee">
                        <el-input v-model.number="form.otherFee" type="number"  placeholder="请输入其他费用"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">违章信息</p>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="违章分数:" prop="violationScore">
                        <el-input v-model.number="form.violationScore" type="number" placeholder="请输入违章分数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="违章费用:" prop="violationFee">
                        <el-input v-model.number="form.violationFee" type="number" placeholder="请输入违章费用"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="违章附件:" prop="violationAttachment">
                        <image-common :up-type="2" v-model="form.violationAttachment" info="违章附件"></image-common>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">扣款费用</p>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="车辆租金欠款金额:" prop="rentArrears">
                        <el-input v-model.number="form.rentArrears" type="number" placeholder="请输入车辆租金欠款金额"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="剩余租期:" prop="remainingLeaseTerm">
                        <el-input v-model="form.remainingLeaseTerm" disabled ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尾款:" prop="balancePayment">
                        <el-input v-model.number="form.balancePayment" type="number" placeholder="请输入尾款"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="加速折旧费:" prop="depreciation">
                        <el-input v-model.number="form.depreciation" type="number" placeholder="请输入加速折旧费"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="违约金:" prop="defaultDeduction">
                        <el-input v-model.number="form.defaultDeduction" type="number" placeholder="请输入违约金"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="超里程数(km):" prop="overMileage">
                        <el-input v-model.number="form.overMileage" type="number" placeholder="请输入超里程数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="超里程费:" prop="overMileageFee">
                        <el-input v-model.number="form.overMileageFee" type="number" placeholder="请输入超里程费"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">自定义扣款项</p>
                </el-col>
                <el-table
                    :data="form.orderReturnDeduction"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>

                    <el-table-column
                        align="center"
                        prop="deductionName"
                        label="扣款项名称"
                        min-width="180">
                        <template v-slot="{row}">
                            <el-input v-model="row.deductionName" placeholder="扣款项名称" clearable/>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="deductionAmount"
                        label="扣款金额"
                        min-width="180">
                        <template v-slot="{row}">
                            <el-input v-model="row.deductionAmount" placeholder="请输入扣款金额" type="number" clearable/>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="deductionReason"
                        label="扣款原因"
                        min-width="180">
                        <template v-slot="{row}">
                            <el-input v-model="row.deductionReason" placeholder="请输入扣款原因" clearable/>
                        </template>
                    </el-table-column>

                    <el-table-column
                        align="center"
                        prop="fieldDict"
                        label="操作"
                        fixed="right"
                        min-width="100">
                        <template v-slot="{$index}">
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteDeductPayment($index)"></el-button>
                        </template>
                    </el-table-column>
                    <template v-slot:append>
                        <div class="flex-xy-center" style="height: 30px">
                            <el-button type="text" icon="el-icon-plus" @click="adddDuctPayments">添加扣款项</el-button>
                        </div>
                    </template>
                </el-table>
            </el-row>
        </el-form>

    </div>
</template>

<script>
import { calculateDeductionFees } from '@/api/returnCar/returnCar'

export default {
    components: {},
    props: {
        detailInfo:{
            type:Object,
            default:()=>{
                return {}
            }
        }
    },
    data() {
        return {
            claimsLiabilityTypes: [
                {
                    label: '客户承担理赔',
                    value: 1
                },
                {
                    label: '保险理赔',
                    value: 2
                }
            ],
            form: {

                returnTime: null,//还车时间
                fulfilledLeaseTerm:this.detailInfo?.fulfilledLeaseTerm||'--',//已履行租期
                returnMileage:null,//还车里程
                returnFuel:null,//还车油量
                drivingMileage:null,//行驶里程
                oilVolumeDiff:null,//油量差值
                reasonForReturningTheCar: null,//还车原因
                claimsMethod: 1,//理赔方式:1客户理赔 2.保险理赔
                compensationClaims:null,//客户|保险理赔款
                otherFee:null,//理赔其他费用
                violationScore:this.detailInfo?.violationScore||0,//违章分数
                violationFee:this.detailInfo?.violationFee||0,//违章费用
                violationAttachment:null,//违章附件
                rentArrears:this.detailInfo?.rentArrears||0,//车辆租金欠款金额
                remainingLeaseTerm:this.detailInfo?.remainingLeaseTerm||0,//剩余租期
                balancePayment:this.detailInfo?.balancePayment||0,//尾款
                depreciation:this.detailInfo?.depreciation||0,//加速折旧费
                defaultDeduction:this.detailInfo?.defaultDeduction||0,//违约金
                overMileage:this.detailInfo?.overMileage||0,//超里程数
                overMileageFee:this.detailInfo?.overMileageFee||0,//超里程费
                //自定义扣款项
                orderReturnDeduction: [{
                    deductionName: null,
                    deductionAmount: null,
                    deductionReason: null
                }]
            },
            rules: {
                returnTime: [
                    {required: true, message: '请选择还车时间', trigger: 'blur'},
                ],
              violationAttachment: [
                    {required: true, message: '请上传违章附件', trigger: 'blur'},
                ],

            },
        }
    },
    computed: {
      // fulfilledLeaseTerm(){
      //   let outboundDate = this.detailInfo?.outboundVehicleCondition.outboundDate;
      //   const date1 = new Date(outboundDate);
      //   const date2 = new Date(this.form.returnTime);
      //   if(!date1||!this.form.returnTime){
      //     return "--"
      //   }
      //   let months = (date2.getFullYear() - date1.getFullYear()) * 12;
      //   months -= date1.getMonth();
      //   months += date2.getMonth();
      //   const dateDiff = date2.getDate() - date1.getDate();
      //   if (dateDiff < 0) {
      //     months--;
      //   }
      //   if(months<0||(months===0&&dateDiff<0)){
      //     return "0日"
      //   }else{
      //     if(months===0){
      //       return `${dateDiff > 0 ? dateDiff : 1}日`;
      //     }else{
      //       return `${months}月${dateDiff > 0 ? dateDiff : 0}日`;
      //     }
      //   }
      // },
    },
    methods: {
      // 计算扣款费用
      calculateDeductionFees() {
        if (this.form.returnCategory > 2) {
          calculateDeductionFees({
            orderNumber: this.detailInfo.orderNumber,
            outboundMileage: this.detailInfo.outboundMileage,
            outboundFuel: this.detailInfo.outboundFuel,
            returnCategory: this.form.returnCategory,
            returnTime: this.form.returnTime,
            returnMileage: this.form.returnMileage,
            returnFuel: this.form.returnFuel
          }).then(res => {
            const data = res.data;
            this.form.fulfilledLeaseTerm = data?.fulfilledLeaseTerm
          })
        }
      },
        // 计算行驶里程
        blurReturnMileage(){
            this.form.drivingMileage=Number(this.form.returnMileage)-Number(this.detailInfo?.outboundVehicleCondition?.outboundMileage)
        },
        //计算油量差值
        blurReturnFuel(){
            this.form.oilVolumeDiff=Number(this.form.returnFuel)-Number(this.detailInfo?.outboundVehicleCondition?.outboundOilVolume)
        },
        adddDuctPayments() {
            const obj = {
                deductionName:null,
                deductionAmount:null,
                deductionReason:null
            }
            this.form.orderReturnDeduction.push(obj)
        },
        deleteDeductPayment(index) {
            this.form.orderReturnDeduction.splice(index, 1)
        },
        saveForm() {
            let flag = false
            this.$refs['form3'].validate((valid) => {
                if (valid) {
                    flag=true
                    if (this.form.orderReturnDeduction && this.form.orderReturnDeduction.length > 0) {
                        this.form.orderReturnDeduction.every((item) => {
                            if (this.isNull(item.deductionName)) {
                                this.$message.error('请完善扣款项名称')
                                flag = false
                                return
                            } else if (this.isNull(item.deductionAmount)) {
                                this.$message.error('请完善扣款金额')
                                flag = false
                                return
                            } else if (this.isNull(item.deductionReason)) {
                                this.$message.error('请完善扣款金额')
                                flag = false
                                return
                            }
                        })
                    }
                }else  {
                    flag = false
                }
            })
            if (flag) {
                console.log('事故还车组件表单-----', this.form)
                return this.form
            }
        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #333333;

    &::before {
        display: inline-block;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: $primary;
        margin-right: 5px;
        position: relative;
        top: -1px;
    }
}

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}
</style>
